<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <!--
        主轴对齐方式
        justify-content:flex-start开始对齐
                        flex-end 结尾对齐
                        center 中心对齐
                        space-between两端对齐
                        space-around 自动分配间隙
        flex-direction:row/column 主轴方向水平/垂直
        flex默认不换行
        flex-wrap:wrap换行
                  wrap-reverse 换行放不下的元素放上面一行
        align-items:center（交叉轴居中）+justify-content:center实现垂直居中
        flex-grow:数字
    -->
    <header>
        <div>
            <img src="img/1.png">
        </div>
        <div>
            <p class="options">
                <span>店铺</span>
                <span></span>
            </p>
            <p class="input-wrapper">
                <input type="text" placeholder="搜索店铺">
            </p>
        </div>
        <div>取消</div>
    </header>
    <p class="search-history">
        <span>历史搜索</span>
        <span class="iconfont icon-trash"></span>
    </p>
    <section class="search-history-items">
        <span>芋圆</span>
        <span>牛排</span>
        <span>乌冬面</span>
        <span>咖啡</span>
        <span>自助餐</span>
        <span>密室逃脱</span>
        <span>展览馆</span>
        <span>电影</span>
        <span>KTV</span>
        <span>主题公园</span>
        <span>纹身</span>
        <span>农家乐</span>
    </section>
    <p class="favirate">请选择你喜欢的</p>
    <section class="favirate-items">
        <p>
            <span>甜点</span>
            <span>火锅</span>
            <span>沈阳</span>
            <span>西餐</span>
            <span>自助餐</span>
        </p>
        <p>
            <span>东北菜</span>
            <span>烤肉</span>
            <span>素食</span>
            <span>粤菜</span>
            <span>自助餐</span>
            <span>桌游</span>
            <span>电玩</span>
            <span>健身</span>
        </p>
        <p>
            <span>温泉</span>
            <span>酒吧</span>
            <span>游船</span>
            <span>漂游</span>
            <span>海洋馆</span>
            <span>展览馆</span>
        </p>
        <p>
            <span>真人cs</span>
            <span>美发</span>
            <span>客家菜</span>
            <span>女孩</span>
            <span>纹身</span>
        </p>
        <p>
            <span>单身</span>
            <span>汗蒸</span>
            <span>高空观景</span>
            <span>咖啡</span>
        </p>
    </section>
    <p class="confirm">
        <button class="confirm-button">确定</button>
    </p>
</body>
</html>